<template>
  <div id="roleAply">
    <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item field="code" label="申请加入的班级">
        <a-select
          class="select"
          :style="{ width: '600px' }"
          v-model="className"
          placeholder="   Please select ..."
          allow-clear
        >
          <a-option v-for="choice in choices" :key="choice.classId">
            {{ choice.className }}
          </a-option>
          <a-option disabled>管理员班</a-option>
        </a-select>
      </a-form-item>

      <a-form-item style="padding-top: 25px">
        <a-button html-type="aplyClass">Apply</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
        
<script>
import { reactive } from "vue";
import axios from "axios";

export default {
  data() {
    return {
      choices: [
        {
          classId: 1,
          className: "软卓一班",
        },
        {
          classId: 2,
          className: "软卓二班",
        },
      ],
    };
  },
  mounted() {
    axios
      .get("/searchClass")
      .then((response) => {
        this.choices = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  methods: {
    handleSubmit() {
      axios
        .post("/submit/submitAddClass", {
          addClassName: this.className,
          user: this.$store.state.user.loginUser.userName,
        })
        .then((response) => {
          if (response.data) {
            alert("提交成功，等待班主任审核");
          } else {
            alert("提交失败");
          }
        });
    },
  },
};
</script>
    
    <style>
#roleAply {
  padding-top: 100px;
  padding-left: 400px;
}
#roleAply .select {
  padding-left: 0px;
}
</style>